<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化项目</title>
    <!-- 引入默认样式清除插件 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 引入字体图标插件 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./fonts/style.css">
    <!-- 引入配对的css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入ECharts数据可视化插件 -->
    <script src="js/echarts.min.js"></script>
    <!-- 引入窗口调整插件 -->
    <script src="js/flexible.js"></script>
    <!-- 引入jquery插件 -->
    <script src="js/jQuery.min.js"></script>
   
</head>

<body>
    <!-- 创建一个大盒子作为父容器 -->
    <div class="viewport">
        <!-- 盒子大小不一样，但是边框样式相同 -->
        <!-- 这就需要 边框图片 来完成 -->
        <!-- 注意是边框的背景图，不是盒子的 -->
        <div class="culomn">
            <!-- 创建概览区域 -->
            <div class="overview panel">
                <!-- 创建一个子容器用来放内容 -->
                <div class="inner">
                    <ul>
                        <li>
                            <h4>2190</h4>
                            <span>
                                <i class="icon-dot" style="color: #4c9bfd;"></i>
                                设备总数
                            </span>
                        </li>
                        <li>
                            <h4>190</h4>
                            <span>
                                <i class="icon-dot" style="color: green;"></i>
                                季度新增
                            </span>
                        </li>
                        <li>
                            <h4>3001</h4>
                            <span>
                                <i class="icon-dot" style="color: green;"></i>
                                运营总数
                            </span>
                        </li>
                        <li>
                            <h4>108</h4>
                            <span>
                                <i class="icon-dot" style="color: orange;"></i>
                                异常设备
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 创建监控区域 -->
            <div class="panel monitor">
                <div class="inner">

                </div>
            </div>
            <!-- 点位分布统计模块制作 -->
            <div class="point panel">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="chart">
                        <div class="pie">
                            <!-- 这里是图例 -->
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    点位总数
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="culomn"></div>
        <div class="culomn"></div>
    </div>
     <!-- 引入配对的js -->
     <script src="./js/index.js"></script>
</body>

</html>